<template>
  <div>
    简历管理
    <div v-show="opview=='list'">
      <input v-model="key">
      <button @click="toadd">添加</button>
      <table>
        <tr>
          <td>序号</td>
          <td>id</td>
          <td>name</td>
          <td>求职意向</td>
          <td>教育</td>
          <td>性别</td>
          <td>操作</td>
        </tr>
        <tr v-bind:key="r.id" v-for="(r,pos) in vlist">
          <td>{{ pos+1}}</td>
          <td>{{ r.id}}</td>
          <td>{{r.name}}</td>
          <td>{{r.obj}}</td>
          <td>{{r.education}}</td>
          <td>{{r.sex}}</td>
          <td><button @click="delById(r.id)">删除</button>
            <button  @click="updateById(r.id)" >修改</button></td>
        </tr>
      </table>
    </div>
<!--    添加功能-->
    <div v-show="opview=='add'">
      简历名称：<input v-model="formData.resume"><br>
      姓名：<input v-model="formData.name"><br>
      求职意向：
      <label  v-bind:key="o" v-for="o in objs">
        <input type="checkbox"  v-bind:value="o"  v-model="formData.obj"> {{o}}
      </label><br>
      生日：<input type="date" v-model="formData.birthday"><br>
      教育经历：<select v-model="formData.education">
        <option v-bind:key="e" v-for="e in edus" v-bind:value="e" v-bind:label="e"></option>
        </select><br>
      选择性别：<label v-for="s in sexs" v-bind:key="s" >
        <input name="sex" type="radio" v-bind:value="s" v-model="formData.sex">{{s}}
      </label><br>
      邮箱：<input v-model="formData.email"><br>
      电话：<input v-model="formData.mobile"><br>
      <button @click="addData">完成</button>
      <button @click="opview='list'">取消</button>
    </div>

    <!--    修改功能-->
    <div v-show="opview=='update'">
      简历名称：<input v-model="formData.resume"><br>
      姓名：<input v-model="formData.name"><br>
      求职意向：
      <label  v-bind:key="o" v-for="o in objs">
        <input type="checkbox"  v-bind:value="o"  v-model="formData.obj"> {{o}}
      </label><br>
      生日：<input type="date" v-model="formData.birthday"><br>
      教育经历：<select v-model="formData.education">
      <option v-bind:key="e" v-for="e in edus" v-bind:value="e" v-bind:label="e"></option>
    </select><br>
      选择性别：<label v-for="s in sexs" v-bind:key="s" >
      <input name="sex" type="radio" v-bind:value="s" v-model="formData.sex">{{s}}
    </label><br>
      邮箱：<input v-model="formData.email"><br>
      电话：<input v-model="formData.mobile"><br>
      <button @click="updateData">完成</button>
      <button @click="opview='list'">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResumeView',
  data: function () {
    return {
      opview: 'list', // 当前所处的页面
      key: '',
      lastId: 2,
      formData: {
        id: 0,
        resume: '',
        obj: [],
        education: '',
        birthday: '',
        name: '',
        mobile: '',
        email: '',
        sex: ''
      },
      // 所有的求职意向
      objs: ['经理', '会计', '销售', '财务', '教师', '工程师', '程序员'],
      edus: ['高中', '大专', '大本', '硕士', '博士'],
      sexs: ['男', '女', '人妖'],
      list: [{
        id: 1,
        name: 'zhangsan'
      }, {
        id: 2,
        name: 'lisi'
      }]
    }
  },
  computed: {
    vlist: function () {
      return this.list.filter(x => {
        return x.name.includes(this.key) // 过滤
      })
    }
  },
  methods: {
    toadd: function () {
      this.formData = {
        id: 0,
        resume: '',
        obj: [],
        education: '',
        birthday: '',
        name: '',
        mobile: '',
        email: '',
        sex: ''
      }
      this.opview = 'add'
    },
    // 去修改页面
    updateById: function (id) {
      this.opview = 'update'
      // this.formData = this.list.find(x => { return x.id === id })
      const resume = this.list.find(x => { return x.id === id })
      this.formData = JSON.parse(JSON.stringify(resume))
    },
    delById: function (id) {
      // eslint-disable-next-line array-callback-return
      const index = this.list.findIndex(x => { return x.id === id })
      alert(index)
      if (index >= 0) {
        this.list.splice(index, 1)
      }
    },
    addData: function () {
      const newResume = JSON.parse(JSON.stringify(this.formData))
      newResume.id = ++this.lastId
      this.list.push(newResume)
      this.opview = 'list'// 切换视图页面
    },
    // 提交修改的数据
    updateData: function () {
      // 数据反序列化回去
      // 找到原来的数据
      // eslint-disable-next-line no-return-assign
      const oldData = this.list.find(x => { return x.id = this.formData.id })
      oldData.name = this.formData.name
      oldData.resume = this.formData.resume

      this.opview = 'list'
    }
  }
}
</script>

<style scoped>

</style>
